<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Insert title here</title>
		<style type="text/css">
		body{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 508px;
			height: 196px;
			margin: 200px 0px 0px 0px;
		}
		.box div{
			float: left;
		}
		.box-top{
			width: 254px;
			background-color: green;
		}
		.box-cent{
			width: 254px;
			background-color: blue;
		}
		.box-left{
			width: 254px;
			-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, -30deg);
			-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, -30deg);
			-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, -30deg);
			-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, -30deg);
			transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, -30deg);
			background-color: gray;
			display: inline-block;
			height: 98px;
		}
		</style>
	</head>
	<body>
		<div class="box">
		
			<div class="box-top">
				<table>
					<tr>
						<td>Top</td>
						<td>Top</td>
						<td>Top</td>
						<td>Top</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
					</tr>
					<tr>
						<td>3</td>
						<td>3</td>
						<td>3</td>
						<td>3</td>
					</tr>
				</table>
			</div>
			
			<div class="box-left">
				<table>
					<tr>
						<td>Left</td>
						<td>Left</td>
						<td>Left</td>
						<td>Left</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
					</tr>
					<tr>
						<td>3</td>
						<td>3</td>
						<td>3</td>
						<td>3</td>
					</tr>
				</table>
			</div>
			
			<div class="box-cent">
				<table>
					<tr>
						<td>Centro</td>
						<td>Centro</td>
						<td>Centro</td>
						<td>Centro</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
					</tr>
					<tr>
						<td>3</td>
						<td>3</td>
						<td>3</td>
						<td>3</td>
					</tr>
				</table>
			</div>
		
			
		</div>
	
	</body>
</html>